import { FC } from 'react'
import "../static/css/home.css"
import { Table } from 'antd';
import VisitorRecordDiagram from '../components/VisitorRecordDiagram'
const Home: FC = (): JSX.Element => {
    const columns: any = [
        {
          title: '日期',
          dataIndex: 'time'
        },
        {
          title: '人数',
          dataIndex: 'num'
        }
      ];
      const data: any = [
        {
          key: '1',
          time: '2022-06-01',
          num: 32
        },
    ]
    const columnsType: any = [
        {
          title: '日期',
          dataIndex: 'timeType'
        },
        {
            title: '类型',
            dataIndex: 'type'
          },
        {
          title: '人数',
          dataIndex: 'numType'
        }
      ];
      const dataType: any = [
        {
          key: '1',
          timeType: '2022-06-01',
          type:'外来',
          numType: 10
        },
        {
            key: '2',
            timeType: '2022-06-01',
            type:'学生',
            numType: 12
          },
          {
            key: '3',
            timeType: '2022-06-01',
            type:'老师',
            numType: 10
          },
    ]
    return (
        <div className='home'>
            <div className='top'>
                <div className='box'>
                    <div className='tubiao'>
                        <div className='title'>今日访客</div>
                        <div className='fonts'>20</div>
                    </div>
                    <div className='one'>
                        <div className='shen'>待审核：20人</div>
                        <div className='tong'>未通过：20 人 已取消：1 人</div>
                    </div>
                </div>
                <div className='box'>
                    <div className='tubiao yesterday'>
                        <div className='title'>昨日访客</div>
                        <div className='fonts'>20</div>
                    </div>
                    <div className='one'>
                        <div className='shen'>待审核：20人</div>
                        <div className='tong'>未通过：20 人 已取消：1 人</div>
                    </div>
                </div>
                <div className='box'>
                    <div className='tubiao seven'>
                        <div className='title'>最近七天</div>
                        <div className='fonts'>20</div>
                    </div>
                    <div className='one'>
                        <div className='shen'>待审核：20人</div>
                        <div className='tong'>未通过：20 人 已取消：1 人</div>
                    </div>
                </div>
                <div className='box'>
                    <div className='tubiao month'>
                        <div className='title'>近三十天</div>
                        <div className='fonts'>20</div>
                    </div>
                    <div className='one'>
                        <div className='shen'>待审核：20人</div>
                        <div className='tong'>未通过：20 人 已取消：1 人</div>
                    </div>
                </div>
                <div className='box'>
                    <div className='tubiao year'>
                        <div className='title'>最近一年</div>
                        <div className='fonts'>20</div>
                    </div>
                    <div className='one'>
                        <div className='shen'>待审核：20人</div>
                        <div className='tong'>未通过：20 人 已取消：1 人</div>
                    </div>
                </div>
            </div>
            <div className='record'>
                <VisitorRecordDiagram></VisitorRecordDiagram>
            </div>
            <div className='table'>
                <div className='header'>本周详情</div>
                <div className='body'>
                    <div className='box'>
                        <span>本周人员统计表：</span>
                        <Table
                            columns={columns}
                            dataSource={data}
                            bordered
                            pagination={false}
                        />
                    </div>
                    <div className='box'>
                        <span>本周人员申请类型表：</span>
                        <Table
                            columns={columnsType}
                            dataSource={dataType}
                            bordered
                            pagination={false}
                        />
                    </div>
                    {/* <div></div> */}
                </div>
            </div>
        </div>
    )
}
export default Home